<template>
  <div class="content">
    <view class="top_div">
      <u-navbar :title="id ? '编辑账单' : '添加账单'" :titleStyle="{ fontSize: '16px', color: '#fff' }" :autoBack="true"
        leftIconColor="#ffffff" bgColor="#5394F2" :placeholder="true"></u-navbar>
      <div class="flex_between catalogue_div flex_items">
        <div class="catalogue_ul flex_center">
          <div class="catalogue_li flex_center" @click="categoryTypeFun(1)"
            :class="[categoryType == 1 ? 'select' : '']">
            支出</div>
          <div class="catalogue_li flex_center" @click="categoryTypeFun(2)"
            :class="[categoryType == 2 ? 'select' : '']">
            收入</div>
        </div>
        <div class="flex_center time_div" @click="timeShow = true">
          <span>{{ $Common.showConversTime(time, 2) }}</span>
          <u-icon name="arrow-down" color="#ffffff" size="22"></u-icon>
        </div>
      </div>
    </view>
    <div class="center_div">
      <div class="category_ul flex_warp">
        <div class="category_li flex_center flex_column" @click="selectCategory(item.type)"
          :class="[catalogueType == item.type ? 'select' : '']" v-for="item in categoryList" :key="item.type">
          <img :src="$IMG_HOST + item.icon" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="input_ul">
        <div class="input_li flex_center">
          <span>金额</span>
          <u--input class="flex1" border="none" fontSize="18" placeholder="请输入金额" type="number" @input="check"
            v-model="money"></u--input>
        </div>
        <div class="input_li flex_center">
          <span>备注</span>
          <u--input class="flex1" border="none" fontSize="18" placeholder="请输入内容" type="text"
            v-model="remark"></u--input>
        </div>
        <div class="submit_button flex_center flex1" @click="submitFun">
          提交
        </div>
      </div>
    </div>
    <!-- 时间选择器 -->
    <u-datetime-picker ref="datetimePicker" @confirm="timeShow = false" @cancel="timeShow = false" :show="timeShow"
      v-model="time" mode="date"></u-datetime-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',//编辑
      categoryType: 1,//类型1支出 2收入
      time: Number(new Date()),
      timeShow: false,
      categoryList: [],//类目列表
      catalogueType: null,//类目

      money: null,//金额
      remark: null,//备注
    }
  },
  components: {
  },
  watch: {},
  methods: {
    goHome() {
      uni.switchTab({
        url: '/'
      })
    },
    check: function (e) {
      //正则表达试
      e = e.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      if (e) {
        if (e.indexOf(".") == 0) e = "0" + e;
        if (e < 0) e = null;
      }
      //重新赋值给input
      this.$nextTick(() => {
        this.money = e;
      });
    },
    blurFun() {
      if (!this.catalogueType || this.catalogueType == "") {
        this.$u.toast("请输入选择录入的类型");
        return false;
      }
      if (!this.money || this.money == "" || this.money <= 0) {
        this.$u.toast("请输入金额，并且大于0");
        return false;
      }
      return true;
    },
    // 编辑
    updateFun() {
      this.$Ajax({
        url: "account/update",
        data: {
          _id: this.id,
          recordingTime: this.time,
          type: this.categoryType,
          catalogueType: this.catalogueType,
          money: this.money,
          remark: this.remark,
        },
        method: 'post'
      }).then(res => {
        this.$u.toast('修改成功');
        setTimeout(() => {
          this.goHome();
        }, 2000)
      })
    },
    // 提交按钮
    submitFun() {
      if (!this.blurFun()) return false;
      if (this.id) {
        this.updateFun();
        return;
      }
      this.$Ajax({
        url: "account/create",
        data: {
          recordingTime: this.time,
          type: this.categoryType,
          catalogueType: this.catalogueType,
          money: this.money,
          remark: this.remark,
          userId: this.$Storage.getUserInfo()._id,
        },
        method: 'post'
      }).then(res => {
        this.$u.toast('添加成功');
        setTimeout(() => {
          this.goHome();
        }, 2000)
      })
    },
    // 获取详情
    getDetails() {
      this.$Ajax({
        url: "account/details",
        data: {
          id: this.id,
        },
        method: 'get'
      }).then(res => {
        console.log(res)
        // this.categoryList = res.data
        const { catalogueType, money, recordingTime, remark, type } = res.data;
        this.categoryType = type;
        this.time = recordingTime;
        this.catalogueType = catalogueType;
        this.money = money;
        this.remark = remark;
      })
    },
    // 获取分类
    getCategory() {
      this.$Ajax({
        url: "category/getCategory",
        data: {
          categoryType: this.categoryType,
        },
        method: 'get'
      }).then(res => {
        console.log(res)
        this.categoryList = res.data
      })
    },
    // 切换类型
    categoryTypeFun(type) {
      if (this.categoryType == type) return false;
      this.categoryType = type;
      this.catalogueType = null;
      this.getCategory();
    },
    // 选择类目
    selectCategory(type) {
      this.catalogueType = type;
    }
  },
  beforeCreate() { },
  onLoad(opacity) {
    if (opacity && opacity.id) {
      this.id = opacity.id;
      this.getDetails();
    }
  },
  created() {
    this.getCategory();
  },
  beforeMount() { },
  mounted() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>

<style scoped lang='scss'>
.content {
  width: 100vw;
  height: 100vh;

  .top_div {
    // background: #5394F2;
    background: linear-gradient(180deg, #5394F2 90%, rgba(82, 147, 241, .0) 100%);
    padding-bottom: 40rpx;

    .catalogue_div {
      padding: 20rpx 30rpx;
    }

    .catalogue_ul {
      border: 2rpx solid #fff;
      border-radius: 14rpx;
      overflow: hidden;

      .catalogue_li {
        width: 140rpx;
        height: 70rpx;
        font-size: 32rpx;
        color: #fff;

        &.select {
          background: #fff;
          color: #5394F2;
        }
      }
    }

    .time_div {
      span {
        font-size: 28rpx;
        white-space: nowrap;
        color: #fff;
        margin-right: 10rpx;
      }
    }
  }
}

.center_div {
  padding: 20rpx 0 20rpx 32rpx;

  .category_ul {
    flex-wrap: wrap;

    .category_li {
      margin: 0 20rpx 30rpx 0;
      width: calc(20% - 20rpx);
      border-radius: 20rpx;
      padding: 10rpx 0;
      opacity: .6;
      animation: all .5s ease;

      &.select {
        opacity: 1;
        background: rgb(116 219 180 / 40%);

        span {
          color: #dd6ef7;
        }
      }

      img {
        width: 80rpx;
        margin-bottom: 10rpx;
      }

      span {
        font-size: 26rpx;
        color: #bbb;
        font-weight: bold;
      }
    }

  }

  .input_ul {
    padding: 40rpx 32rpx 0 0;

    .input_li {
      margin-bottom: 20rpx;
      background: #F8F8F8;
      height: 90rpx;
      border-radius: 10rpx;

      span {
        width: 120rpx;
        text-align: center;
        font-size: 34rpx;
        color: #4d4c4c;
        font-weight: bold;
        line-height: 1em;
      }
    }

    .submit_button {
      height: 90rpx;
      background: #389AFD;
      font-size: 40rpx;
      color: #fff;
      border-radius: 10rpx;
      margin-top: 40rpx;
    }
  }
}
</style>